<template>
  <view class="segment" :style="{backgroundColor:backgroundColor }" >
    <view
      class="segment-item"
      :class="[current == index ? 'active' : '']"
      v-for="(t, index) in tabs"
      :key="index"
      @click="onClick(t, index)"
    >
      <text class="segment-item-text">{{ t.name }}</text>
      <view class="line"></view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    tabs: Array,
    current: Number,
	backgroundColor: String,
  },
  methods: {
    onClick(tab, index) {
      console.log(arguments, "??vv");
      this.$emit("change", tab, index);
    },
  },
};
</script>

<style lang="stylus" scoped>
@import '~@/common/stylus/variable';

.segment {
  position: relative;
  display: flex;
  z-index: 3;
  flex-direction: row;
  // background-color: #fff;
  padding: 0 40rpx;
  font-size: 32rpx;
  color: color-white;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  box-shadow: 0 0 8rpx 0 rgba(0, 0, 0, 0.12);

  &-item {
    position: relative;
    flex: 1;
    text-align: center;
    padding: 20rpx 0;

    &.active {
      .segment-item-text {
        color: color-active;
      }

      >.line {
        transform: scale(1);
      }
    }

    > .line {
      position: absolute;
      width: 60rpx;
      height: 4rpx;
      max-width: 90%;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      background-color: color-active;
      transition: transform 0.3s;
      transform: scale(0);
    }
  }
}
</style>